<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷列表</title>
</head>
<style>
    #app{

    }
    .quesList{
        padding: 10px;
    }
    .quesItem{
        display: flex;
        justify-content: space-between;
        background-color: deepskyblue;
        padding: 10px;
        margin-bottom: 5px;
        border-radius: 10px;
        cursor: pointer;
    }
    .quesItem:hover{
        background-color: #1f90d8;
    }
</style>
<body>
<div id="app">
    <div class="quesList">
        <div class="quesItem"  v-for="(item, index) in list" @click="jump(item)">
            <div class="content">
                <span>{{index+1}}、问卷{{item.questionnarieId}}</span>
            </div>
            <div class="person">
                <span>被审查人: {{item.informantName}}</span>
            </div>
            <div class="time">
                <span>截至时间{{item.endTime}}</span>
            </div>
        </div>
    </div>
</div>
</body>
<!--引入vue-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            id:[[${@permission.getPrincipalProperty('userId')}]],//该用户id
            list:[
                // {
                //     id:1,
                //     id2:1,//被审查人id
                //     name2:"张三",//被审查人name
                //     name:"问卷1",
                //     time:"2021/12/15 23:59",
                // },
                // {
                //     id2:2,//被审查人id
                //     name2:"李四",//被审查人name
                //     id:2,
                //     name:"问卷1",
                //     time:"2021/12/15 23:59"
                // },
                // {
                //     id2:3,//被审查人id
                //     name2:"王五",//被审查人name
                //     id:3,
                //     name:"问卷1",
                //     time:"2021/12/15 23:59"
                // }
            ]
        },
        created(){
            var _that = this;
            //    请求后端接口 获取该用户待填写数据 参数为该用户id
            $.ajax({
                url:"showques/allQuestionnaire",
                data:{
                    id:this.id
                },
                type:"GET",
                success:function(res){ //成功回调函数
                    _that.list = res.UserInformantList;
                    console.log(_that.list);
                },
                error:function (err){ //失败回调函数
                    alert(err);
                }
            })
        },
        methods:{
            jump(item){
                window.location.href='showques/single?id='+item.questionnarieId+"&id2="+item.informantId;
            }
        }
    })
</script>
</html>